<template>
	<!-- 	<page-meta>
		<navigation-bar :title="nbTitle" :title-icon-radius="titleIconRadius" :subtitle-color="nbFrontColor"
			:loading="nbLoading" :front-color="nbFrontColor" :background-color="nbBackgroundColor" />
	</page-meta> -->
	<view>

		<!-- 教育摘要 -->
		<view class="footer-top">
			<view v-for="(slide, i) in educationList" :index="i" :key="i">
				<view class="footerBorder">
					<view class="footer" @click="gotoDetails(slide)">
						<view class="footer-image">
							<image :src="imageList(slide.educationUrl)"></image>
						</view>
						<view class="footer-content">
							<view class="content-title">
								{{slide.educationTitle}}
							</view>
							<view>
								<mp-html class="content-body" :content="slide.educationContent" />
							</view>
							<view class="date" :date="slide.createTime" format="MM/dd">
								{{slide.createTime}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCurrEducation,
	} from "@/api/home/home.js"
	export default {
		data() {
			return {
				nbTitle: '教育摘要',
				titleIconRadius: '20px',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#fcc10d',
				educationList: [],
			};
		},
		onShow() {
			getCurrEducation().then(res => {

				if (res.code == 200) {
					this.educationList = res.data;
				}
			})
		},
		methods: {
			//详情页
			gotoDetails(event) {
				uni.navigateTo({
					url: '/pages/home/education-details/index?item=' + encodeURIComponent(JSON.stringify(
						event))
				})

			},
		},
		computed: {
			imageList() {
				return function(e) {
					if (e != null) {
						return e.split(",")[0]
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	.footer {
		margin: 10px;
		display: flex;
		justify-content: space-between;

		.footer-image {
			display: block;
			width: 180rpx;
			height: 120rpx;
			margin-right: 10rpx;

			image {
				width: 180rpx;
				height: 120rpx;
			}
		}

		.footer-content {
			display: flex;
			flex-direction: column;
			width: 529rpx;
			margin-right: 380rpx;
		}
	}

	.content-title {
		color: black;
		font-weight: bold;
		width: 529rpx;
		font-size: 35rpx;
		// max-width: 310rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content-body {
		font-size: 10px;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin-bottom: 5px;
	}

	.date {
		padding-left: 270rpx;
	}

	.footer-top {
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.footerBorder {
			border-bottom: 1px #c8c8c8 solid;
		}
	}

	.notice-content {
		display: block;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #482929;
		letter-spacing: 0;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/*规定最多显示两行*/
	}
</style>
